<template>
    <div class="review">
        <div class="query-form">    
            <!-- 查询区域 -->
            <el-form ref="form" :inline="true" :model="review">
                <el-form-item label="报销单ID" prop="rbId" style="width: 200px;">
                    <el-input v-model="review.rbId" placeholder="请输入报销单ID"/>
                </el-form-item>
                <el-form-item label="报销批次ID" prop="upload_id" style="width: 250px;">
                    <el-input v-model="review.upload_id" placeholder="请输入报销批次ID"/>
                </el-form-item>
                <el-form-item label="预测结果" prop="fraud">
                    <el-select v-model="review.fraud" class="el-select" style="width: 100px;">
                        <el-option :value="0"  label="非诈骗" />
                        <el-option :value="1"  label="诈骗" />
                        <el-option :value="2"  label="全选" />
                    </el-select>
                </el-form-item>
                <el-form-item label="审查结果" prop="reviewFraud">
                    <el-select v-model="review.reviewFraud" class="el-select" style="width: 100px;">
                        <el-option :value="0"  label="非诈骗" />
                        <el-option :value="1"  label="诈骗" />
                        <el-option :value="2"  label="未审查" />
                        <el-option :value="3"  label="全选" />
                    </el-select>
                </el-form-item>
                <el-form-item label="线上审查" prop="onlineReview">
                    <el-select v-model="review.onlineReview" class="el-select" style="width: 100px;">
                        <el-option :value="0"  label="未完成" />
                        <el-option :value="1"  label="已完成" />
                        <el-option :value="2"  label="全选" />
                    </el-select>
                </el-form-item>
                <el-form-item label="线下审查" prop="offlineReview">
                    <el-select v-model="review.offlineReview" class="el-select" style="width: 100px;">
                        <el-option :value="0"  label="未完成" />
                        <el-option :value="1"  label="已完成" />
                        <el-option :value="2"  label="全选" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">查询</el-button>
                    <el-button @click="handleReset('form')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="base-table">
            <!-- 列表区域 -->
            <el-table :data="reviewList" >
                <el-table-column width="55" />
                <el-table-column
                    v-for="item in columns"
                    :key="item.prop"
                    :prop="item.prop" 
                    :label="item.label" 
                    :width="item.width"
                    :formatter="item.formatter"
                    align="center"  
                >
                </el-table-column>
                <el-table-column label="操作" min-width="120">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="handleEdit(scope.row)" v-has="'review-review'">审查</el-button>
                        <el-button type="danger" size="small" @click="handleDel(scope.row)" v-has="'review-delete'">删除</el-button>
                        <el-button size="small" @click="handleSubmit(scope.row)" v-has="'review-submit'" :disabled="scope.row.reviewFraud == 2">提交审查</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination 
                class="pagination"
                background
                layout="prev, pager, next" 
                :total="pager.total || 1"
                :page-size="pager.pageSize"
                @current-change="handleCurrentChange"
            />
        </div>
        <el-dialog title="报销单编辑" v-model="showModel" width="40%" class="review-dialog" @close="handleClose">
            <el-form ref="dialogForm" :model="reviewForm" label-width="90px" class="compact-form" :rules="rules">
                <el-form-item label="线上审查" prop="onlineReview">
                    <el-select v-model="reviewForm.onlineReview">
                        <el-option :value="0" label="未完成"></el-option>
                        <el-option :value="1" label="已完成"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="线下审查" prop="offlineReview">
                    <el-select v-model="reviewForm.offlineReview">
                        <el-option :value="0" label="未完成"></el-option>
                        <el-option :value="1" label="已完成"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="审查结果" prop="reviewFraud">
                    <el-select v-model="reviewForm.reviewFraud">
                        <el-option :value="0" label="非诈骗"></el-option>
                        <el-option :value="1" label="诈骗"></el-option>
                        <el-option :value="2" label="未审查"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="审查意见" prop="remark">
                    <el-input type="textarea" :rows="2" v-model="reviewForm.remark" placeholder="请输入审查意见" />
                </el-form-item>
            </el-form>
            <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="handleClose">取消</el-button>
                        <el-button type="primary" @click="handleSave">确定</el-button>
                    </div>
            </template>
        </el-dialog>
    </div>
</template>
  
<script>
import { getCurrentInstance, onMounted, reactive, ref, toRaw } from 'vue'
import utils from '@/utils/utils.js'
export default {
    name:'review',
    setup(){
        // 获取composition api的全局对象
        const { proxy  } = getCurrentInstance();
        // 初始化报销表单对象
        const review = reactive({
            rbId: '',
            upload_id: '',
            fraud: 2,
            reviewFraud: 3,
            onlineReview: 2,
            offlineReview: 2,
        });
        // 初始化报销单列表数据
        const reviewList = ref([

        ]);
        // 初始化分页对象
        const pager = reactive({
            pageNum: 1,
            pageSize: 10,
        })
        // 选中用户列表的对象
        const checkedRbIds = ref([])
        // 弹框显示对象
        const showModel = ref(false);
        // 弹框表单对象
        const reviewForm = reactive({

        })
        // 定义表单验证规则
        const rules = reactive({
            rbId: [
                {
                    // required: true, 
                    // message: '请输入报销单Id', 
                    // trigger: 'blur' 
                }
            ]
        })
        // 定义动态表格-格式，将一些数据格式化成对应的值
        const columns = reactive([
            {
                label:'报销单ID',
                prop: 'rbId',
                width: 150
            },
            {
                label: '报销批次ID',
                prop: 'upload_id',
            },
            {
                label:'预测结果',
                prop: 'fraud',
                formatter(row, column, value){
                    return {
                        0: '非诈骗',
                        1: '诈骗'
                    }[value]
                },
            },
            {
                label:'线上审查',
                prop: 'onlineReview',
                formatter(row, column, value){
                    return {
                        0: '未完成',
                        1: '已完成',
                    }[value]
                },
            },
            {
                label:'线下审查',
                prop: 'offlineReview',
                formatter(row, column, value){
                    return {
                        0: '未完成',
                        1: '已完成',
                    }[value]
                },
            },
            {
                label:'审查结果',
                prop: 'reviewFraud',
                formatter(row, column, value){
                    return {
                        0: '非诈骗',
                        1: '诈骗',
                        2: '未审查',
                    }[value]
                },
            },
        ])
        // 审查人信息
        const reviewer = reactive({
        })
        // 初始化接口调用
        onMounted(()=>{
            getReviewList();
            getUserInfo();
        })
        // 获取用户信息
        const getUserInfo = async ()=>{
            let { userInfo } = await proxy.$storage.getStorage();
            console.log('userinfo>>', userInfo);
            reviewer.userId = userInfo.userId;
            reviewer.userName = userInfo.userName;
        }
        // 获取列表
        const getReviewList = async ()=>{
            let params = { ...review, ...pager };
            try {
                const { list, page } = await proxy.$api.getReviewList(params);
                reviewList.value = list;
                pager.total = page.total;
            } catch (error) {}
        }
        // 查询事件，获取用户列表
        const handleQuery = ()=>{
            getReviewList();
        }
        // 重置查询表单
        const handleReset = (form)=>{
            proxy.$refs[form].resetFields();
        }
        // 分页事件处理
        const handleCurrentChange = (current)=>{
            pager.pageNum = current;
            getReviewList();
        }
        // 审查单删除
        const handleDel = async (row)=>{
            await proxy.$api.reviewDel({
                rbId: row.rbId
            })
            proxy.$message.success('删除成功');
            getReviewList();
        }
        // 报销单编辑弹窗关闭
        const handleClose = ()=>{
            showModel.value = false;
            handleReset('dialogForm');
        }
        // 编辑保存
        const handleSave = () => {
            // 表单验证
            proxy.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    // 获取表单数据
                    let params = toRaw(reviewForm);
                    // 调用接口，提交数据
                    let res = await proxy.$api.reviewSave(params);
                    showModel.value = false;
                    proxy.$message.success('操作成功');
                    handleReset('dialogForm');
                    getReviewList();
                }
            });
        }
        // 审查提交
        const handleSubmit = async (row)=>{
            await proxy.$api.reviewSubmit({
                rbId: row.rbId,
                reviewFraud: row.reviewFraud,
                onlineReview: row.onlineReview,
                offlineReview: row.offlineReview,
                remark: row.remark,
                reviewUserId: reviewer.userId,
                reviewUserName: reviewer.userName,
            })
            proxy.$message.success('提交成功');
            getReviewList();
        }
        // 点击审查按钮弹出编辑弹窗 
        const handleEdit = async (row)=>{
            showModel.value = true;
            proxy.$nextTick(() => {
                // 复制行数据到表单
                Object.assign(reviewForm, row);
            })
        }
        // composition api的写法，暴露变量和方法
        return {
            review,
            reviewList,
            columns,
            pager,
            checkedRbIds,
            showModel,
            reviewForm,
            rules,
            reviewer,
            getReviewList,
            handleQuery,
            handleReset,
            handleCurrentChange,
            handleDel,
            handleClose,
            handleSave,
            handleSubmit,
            handleEdit,
            getUserInfo
        }
    }
}
</script>
  
  
  
<style lang="scss">


.review-manager{
    .query-form{
        background-color: #ffffff;
        padding: 22px 20px 0;
        border-radius: 5px;
        .el-select{
            width: 80px;
        }
    }
    .base-table{
        border-radius: 5px 5px 0px 0px;
        background: #ffffff;
        padding: 20px;
        border-bottom: 1px solid #e4e8e8;
        .pagination{
            margin-top: 20px;
            display: flex;
            justify-content: flex-end; /* 靠右对齐 */
        }
    }
    .review-dialog {
        .el-dialog__body {
            padding: 20px 25px 10px;  // 上 左右 下
        }
        .compact-form {
            .el-form-item {
                margin-bottom: 16px;
                
                .el-form-item__label {
                padding-right: 12px;
                color: #606266;
                }
                
                .el-input, .el-select, .el-cascader {
                    width: 100%;
                }
            }
        }
        .dialog-footer {
            display: flex;
            justify-content: flex-end;
            padding: 10px 20px 20px;
            .el-button {
                min-width: 80px;
                margin-left: 12px;
            }
        }
    }
}
</style>
  